
let form = layui.form;
initEditor();
// 1. 初始化图片裁剪器
var $image = $('#image')


// 获取类别，渲染到下拉框的位置
$.ajax({
  url: '/my/article/cates',
  success: function (res) {
    // 模板
    let htmlStr = template('tpl-category', res);
    $('select[name=cate_id]').html(htmlStr);
    // 动态生成了下拉框的选项，要更新渲染
    form.render('select');
  }
})
// -------------- 封面图片的处理 -------------

$image = $('#image');

let options = {
  // 纵横比
  aspectRatio: 400 / 280,
  // 指定预览区域
  preview: '.img-preview'
}
// 创建剪裁区
$image.cropper(options);
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click');
})

$("#file").on('change', function () {
  let fileObj = this.files[0];
  let url = URL.createObjectURL(fileObj);
  // 销毁原来的剪裁区 --> 更换图片 --> 重新生成剪裁区
  $image.cropper('destroy').attr('src', url).cropper(options)
})
// -------------------------------  添加文章 ----------------------------
$("#add-form").on('submit', function (ev) {
  ev.preventDefault();
  let fd = new FormData(this)  // 参数为表单的DOM对象
  // 不能使用append，要使用set来更换原来的content
  //获取 tinyMCE编辑器 里面的内容
  fd.set('content', tinyMCE.activeEditor.getContent());

  // 剪裁图片
  // 设置宽高    图片剪裁  上传设置宽高                       
  let canves = $image.cropper('getCroppedCanvas', {
    width: 400,
    height: 280
  })
  // 改变图片的形式
  canves.toBlob(function (blob) {
    fd.append('cover_img', blob);

    fd.forEach((value, key) => console.log(value, key))
    $.ajax({
      type: 'POST',
      url: '/my/article/add',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        layer.msg(res.message);
        if (res.status === 0) {
          // 成功后跳转到文章列表页
          location.href = '/article/article.html'
        }
      }
    })
  })

})
